<template>
    <div style="width: 100%; height: 100%">
        <MainHeader class="slogan-header"></MainHeader>
        <div class="main-container-content contentBoxs not">
            <el-row :gutter="10">
                <el-col :xs='24' :sm="24" :md="24" :lg="24" :xl="24">
                    <Commontitle title="病例学习" dec=""></Commontitle>
                </el-col>
            </el-row>
            <div class="contentBoxs-cobtainers" :class="device === 'mobile' ? 'active' : ''">
                <el-row  class="rowContaines">
                    <el-button @click="showdrawer" type="primary" icon="el-icon-s-grid" size="mini"
                        v-if="device === 'mobile'" style="margin-bottom:10px;">
                        病例分类
                    </el-button>
                    <el-col :xs='24' :sm="24" :md="5" :lg="5" :xl="5" v-else>
                        <div class="contentBoxs-leftContent">

                            <div>
                                <el-tree :data="dataTree" node-key="id" default-expand-all highlight-current
                                    :expand-on-click-node="true">
                                    <span class="custom-tree-node" slot-scope="{ node, data }">
                                        <span
                                            :class="data.level == 1 ? 'oneSpan' : data.level == 2 ? 'twoSpan' : data.level == 3 ? 'threeSpan' : 'forSpan'">{{
                                                node.label }} <span class="numSpan">({{ data.num }})</span></span>

                                    </span>
                                </el-tree>
                            </div>
                        </div>
                    </el-col>

                    <el-col :xs='24' :sm="24" :md="19" :lg="19" :xl="19">
                        <div class="contentBoxs-rightContent" ref="tableElement" :style="{height:tableHeight}">
                   

                            
                          
                                    <el-form class="formBox formBox1" :model="queryParams" ref="queryForm" size="small"
                                        :inline="true" label-width="68px">
                                        <el-form-item label="教学库" prop="nickName">
                                            <el-input v-model="queryParams.nickName" placeholder="请输入编号" clearable
                                                style="width:240px" @keyup.enter.native="handleQuery"
                                                @change="handleQuery" />
                                        </el-form-item>
                                        <el-form-item label="脏器" prop="status" clearable>
                                            <el-select v-model="queryParams.status" placeholder="选择脏器" clearable filterable
                                                style="width: 100px" @change="handleQuery">
                                                <el-option v-for="dict in sysUseTypeArr" :key="dict.value"
                                                    :label="dict.label" :value="dict.value" />
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="冰冻" prop="status" clearable>
                                            <el-select v-model="queryParams.status" placeholder="选择冰冻" clearable filterable
                                                style="width: 100px" @change="handleQuery">
                                                <el-option v-for="dict in sysUseTypeArr" :key="dict.value"
                                                    :label="dict.label" :value="dict.value" />
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="病理诊断" prop="status" clearable>
                                            <el-select v-model="queryParams.status" placeholder="选择状态" clearable filterable
                                                style="width: 240px" @change="handleQuery">
                                                <el-option v-for="dict in sysUseTypeArr" :key="dict.value"
                                                    :label="dict.label" :value="dict.value" />
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="标本类型" prop="nickName">
                                            <el-select v-model="queryParams.status" placeholder="选择类型" clearable filterable
                                                style="width: 100px" @change="handleQuery">
                                                <el-option v-for="dict in sysUseTypeArr" :key="dict.value"
                                                    :label="dict.label" :value="dict.value" />
                                            </el-select>
                                        </el-form-item>
                                        <!-- <el-form-item label="创建日期" prop="dateRange">
                                        <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd"
                                            type="daterange" :picker-options="pickerOptions" range-separator="-"
                                            start-placeholder="开始日期" end-placeholder="结束日期"
                                            @change="handleQuery"></el-date-picker>
                                    </el-form-item> -->

                                        <el-form-item>
                                            <el-button type="primary" icon="el-icon-search" size="mini"
                                                @click="handleQuery">搜索</el-button>
                                            <el-button type="warning" icon="el-icon-menu" size="mini"
                                                @click="addUserEvent">排序</el-button>
                                        </el-form-item>
                                    </el-form>
                               
                            <div class="lists_containers">
                                <listItem :itemObj="listItem" :deptNameLists="deptNameLists"
                                    v-for="(listItem, index) in listArr" :key="index" @goToItem="goToItem"></listItem>
                            </div>
                        </div>             
                    </el-col>
                </el-row>
                <div class="paginationDiv" :class="device === 'mobile' ? 'active' : ''">
                    <el-pagination layout="prev, pager, next" :total="total" :current-page.sync="queryParams.pageNum"
                        @current-change="getList">
                    </el-pagination>
                </div>
            </div>
           




        </div>
        <!-- 左侧弹出树形导航 -->
        <div class="classTypeDailog" v-show="drawer">
            <div class="classTypeDailog-content">
                <div class="photoRegisterDailog_title">
                    <div class="titleContent_left">
                        <div class="titleContent_left_line"></div>
                        <div class="titleContent_left_title">
                            病例分类
                        </div>
                    </div>
                    <i class="el-icon-close photoRegisterClose" @click="closeEvent"></i>

                </div>
                <div class="classTypeDailog-content-containers">
                    <el-tree :data="dataTree" node-key="id" default-expand-all highlight-current ref="tree"
                        :expand-on-click-node="false" @current-change="treeChange">
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                            <span
                                :class="data.level == 1 ? 'oneSpan' : data.level == 2 ? 'twoSpan' : data.level == 3 ? 'threeSpan' : 'forSpan'">{{
                                    node.label }} <span class="numSpan">({{ data.num }})</span></span>

                        </span>
                    </el-tree>
                </div>
            </div>
        </div>
        <!-- 详情 -->
        <div class="registerDailog" v-if="casesDetailDailog">
            <individualCases @close="closeEvent" detailType="2"></individualCases>
        </div>
    </div>
</template>

<script>
import individualCases from '@/templates/components/pathLearn/individualCases'
import listItem from '@/templates/components/pathLearn/listItem'
export default {
    name: 'teachManageList',
    components: {
        listItem,
        individualCases
    },
    data() {
        return {
            tableHeight:null,
            casesDetailDailog: false,
            total: 20,
            drawer: false,
            pickerOptions: {
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        const end = date;
                        const start = date;
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '前天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 2);
                        const end = date;
                        const start = date;
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近六个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近1年',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            dataTree: [{
                id: 1,
                label: '一级 1',
                num: 500,
                level: 1,
                children: [{
                    id: 4,
                    label: '二级 1-1',
                    num: 500,
                    level: 2,
                    children: [{
                        id: 9,
                        label: '三级 1-1-1',
                        level: 3,
                        num: 200,
                    }, {
                        id: 10,
                        label: '三级 1-1-2',
                        level: 3,
                        num: 300,
                    }]
                }]
            }, {
                id: 2,
                label: '一级 2',
                num: 500,
                level: 1,
                children: [{
                    id: 5,
                    label: '二级 2-1',
                    num: 200,
                    level: 2,
                }, {
                    id: 6,
                    label: '二级 2-2',
                    num: 300,
                    level: 2,
                }]
            }, {
                id: 3,
                label: '一级 3',
                num: 500,
                level: 1,
                children: [{
                    id: 7,
                    label: '二级 3-1',
                    num: 200,
                    level: 2,
                }, {
                    id: 8,
                    label: '二级 3-2',
                    num: 200,
                    level: 2,
                }]
            }, {
                id: 4,
                label: '一级 3',
                num: 500,
                level: 1,
                children: [{
                    id: 9,
                    label: '二级 3-1',
                    num: 200,
                    level: 2,
                }, {
                    id: 10,
                    label: '二级 3-2',
                    num: 200,
                    level: 2,
                }]
            }, {
                id: 5,
                label: '一级 3',
                num: 500,
                level: 1,
                children: [{
                    id: 11,
                    label: '二级 3-1',
                    num: 200,
                    level: 2,
                }, {
                    id: 12,
                    label: '二级 3-2',
                    num: 200,
                    level: 2,
                }, {
                    id: 13,
                    label: '二级 3-1',
                    num: 200,
                    level: 2,
                }, {
                    id: 14,
                    label: '二级 3-2',
                    num: 200,
                    level: 2,
                }, {
                    id: 15,
                    label: '二级 3-1',
                    num: 200,
                    level: 2,
                }, {
                    id: 16,
                    label: '二级 3-2',
                    num: 200,
                    level: 2,
                }]
            }, {
                id: 6,
                label: '一级 3',
                num: 500,
                level: 1,
                children: [{
                    id: 17,
                    label: '二级 3-1',
                    num: 200,
                    level: 2,
                }, {
                    id: 18,
                    label: '二级 3-2',
                    num: 200,
                    level: 2,
                }, {
                    id: 19,
                    label: '二级 3-1',
                    num: 200,
                    level: 2,
                }, {
                    id: 20,
                    label: '二级 3-2',
                    num: 200,
                    level: 2,
                }, {
                    id: 21,
                    label: '二级 3-1',
                    num: 200,
                    level: 2,
                }, {
                    id: 22,
                    label: '二级 3-2',
                    num: 200,
                    level: 2,
                }]
            }],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                nickName: undefined,
                phonenumber: undefined,
                status: undefined,

            },
            // 日期范围
            dateRange: [],
            tableData: [],
            sysUseTypeArr: [
                { label: '正常', value: '0' },
                { label: '停用', value: '1' }
            ],
            selectNondeData: undefined,
            deptNameLists: [],
            listArr: [
                {
                    patientName: '胃',
                    sex: 1
                },
                {
                    patientName: '胃',
                    sex: 2
                },
                {
                    patientName: '胃',
                    sex: 1
                },
                {
                    patientName: '胃',
                    sex: 1
                },
                {
                    patientName: '胃',
                    sex: 1
                },
            ]

        };
    },
    mounted() {
        this.$nextTick(() => {
            const element = this.$refs.tableElement;
            console.log(element)
            if (element) {
                const rect = element.getBoundingClientRect();
                if (rect && rect.top) {
                    const top = rect.top + 60 + 'px'
                    // console.log("tabl 高度---------------")
                    // console.log(top)
                    this.tableHeight = `calc(100vh - ${top})`
                } else {
                    this.tableHeight = `400px`
                }
            } else {
                this.tableHeight = `400px`
            }
           
        })
    },
    computed: {
        device() {
            return this.$store.state.device
        }

    },
   
    methods: {
        goToItem(data) {
            let obj = data
            console.log(obj)
            this.stopScroll()
            this.casesDetailDailog = true
        },
        getList() {

        },
        handleQuery() {

        },
        addUserEvent() {

        },
        showdrawer() {
            this.drawer = true
            if (this.selectNondeData) {
                this.setCheckedNodes(this.selectNondeData)
            }
            this.stopScroll()
        },
        treeChange(data, node) {
            console.log(node)
            console.log(data)
            this.drawer = false
            this.canScroll()
            this.selectNondeData = data
        },
        setCheckedNodes(data) {
            console.log(this.$refs.tree)
            this.$refs.tree.setCheckedNodes([data]);
        },
        closeEvent() {
            this.casesDetailDailog = false
            this.drawer = false
            this.canScroll()
        }
    },
};
</script>

<style scoped>
.lists_containers{
    padding:10px;
}
.classTypeDailog {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0px;
    left: 0px;
    z-index: 999;
    background: rgba(0, 0, 0, .5);
    cursor: pointer;


}

::v-deep .el-tree-node__content {
    height: 40px;
}

.custom-tree-node {
    line-height: 30px;
}

.oneSpan {
    font-size: 20px;
}

.twoSpan {
    font-size: 18px;
}

.threeSpan {
    font-size: 16px;
}

.fourSpan {
    font-size: 14px;
}

.numSpan {
    font-size: 14px !important;
}

::v-deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    background: #3a62d7 !important;
    color: #fff;
}

.photoRegisterDailog_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;

}

.classTypeDailog-content {
    position: relative;
    width: 30%;
    background: #fff;
    height: 100%;
    padding: 20px 14px;
}

.classTypeDailog-content-containers {
    height: calc(100% - 80px);
    overflow-y: auto;
}
</style>



